<template>
  <div class="interview">
    <h2>Interview view</h2>
    <el-container>
      <el-main v-if="!isInviteCodeExist">
        <el-button type="primary" @click="onInviteCodeInput"
          >输入面试邀请码
        </el-button>
      </el-main>
      <el-main v-if="isInviteCodeExist">
        <el-row :gutter="20">
          <el-col :span="12">
            <interview-problem-description
              @deliverProblemData="setProblemData"
              @onInterviewFinish="onInterviewFinish"
              @onIntervieweeChange="onIntervieweeChange"
            ></interview-problem-description>
            <interview-chat-room ref="chatRoom"></interview-chat-room>
          </el-col>
          <el-col :span="12">
            <interview-code-panel
              ref="interviewCodePanel"
              v-if="isCodePanelShow"
            ></interview-code-panel>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog
      title="请输入面试邀请码"
      :visible.sync="dialogInviteCodeVisiable"
      :before-close="beforeDialogInviteCodeClose"
      append-to-body
    >
      <el-form
        ref="inviteCodeForm"
        :model="interviewInfo"
        :rules="interviewRules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item label="邀请码" prop="inviteCode">
          <el-input
            v-model="interviewInfo.inviteCode"
            @keydown.enter.native="onInviteCodeConfirm"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="onInviteCodeConfirm"
          >参与面试</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import InterviewProblemDescription from "@/components/Interview/InterviewProblemDescription.vue";
import InterviewCodePanel from "@/components/Interview/InterviewCodePanel.vue";
import InterviewChatRoom from "@/components/Interview/InterviewChatRoom.vue";
export default {
  name: "Interview",
  components: {
    InterviewProblemDescription,
    InterviewChatRoom,
    InterviewCodePanel,
  },
  mounted() {
    this.judgeRoomExist();
  },
  methods: {
    onIntervieweeChange(uid) {
      this.userId = uid;
      this.isCodePanelShow = false;
      this.$nextTick(() => {
        this.isCodePanelShow = true;
        this.$nextTick(() => {
          this.$refs["interviewCodePanel"].setProblemData(this.problemData);
          this.$refs["interviewCodePanel"].setUserId(this.userId);
        });
      });
    },
    judgeRoomExist() {
      let roomId = this.$route.params.rid;
      if (roomId) {
        axios
          .get("/api/room/exist", {
            params: { rid: roomId },
          })
          .then((response) => {
            console.log(response);
            if (response.data.result.exist) {
              this.isInviteCodeExist = true;
            } else {
              alert("不存在此面试邀请码");
              this.$router.replace("/interview");
              this.onInviteCodeInput();
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        this.$router.replace("/interview");
        this.onInviteCodeInput();
      }
    },
    onInterviewFinish() {
      this.$refs["chatRoom"].onSubmit();
    },
    setProblemData(data) {
      this.problemData = data;
      this.$refs["interviewCodePanel"].setProblemData(this.problemData);
    },
    setInterviewInfoDefault() {
      this.interviewInfo = {
        inviteCode: "",
      };
    },
    beforeDialogInviteCodeClose(done) {
      this.dialogInviteCodeVisiable = false;
      this.setInterviewInfoDefault();
      done();
    },
    onInviteCodeInput() {
      this.dialogInviteCodeVisiable = true;
    },
    onInviteCodeConfirm() {
      this.$refs["inviteCodeForm"].validate((valid) => {
        if (valid) {
          this.dialogInviteCodeVisiable = false;
          this.$router.push("/interview/" + this.interviewInfo.inviteCode);
        } else {
          this.$message.warning("未输入面试邀请码");
        }
      });
    },
  },
  data() {
    return {
      dialogInviteCodeVisiable: false,
      isInviteCodeExist: false,
      isCodePanelShow: true,
      userId: "",
      tabName: "",
      problemData: [],
      interviewInfo: {
        inviteCode: "",
      },
      interviewRules: {
        inviteCode: [
          {
            required: true,
            message: "请输入面试邀请码",
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>

<style></style>
